<template>
  <div v-bar>
    <v-carousel
      :cycle="true"
      :hide-delimiter-background="true"
      :show-arrows="'always'"
      height="400"
      style="border: 1px solid #ccc; border-radius: 25px"
    >
      <v-carousel-item
        v-for="(item, i) in items"
        :key="i"
        :src="item.src"
        cover
      >
        <div class="d-flex fill-height justify-center align-center">
          <v-img
            :aspect-ratio="1/1"
            :src="item.src"
            cover
          ></v-img>
        </div>
      </v-carousel-item>
    </v-carousel>
  </div>
</template>

<script lang="ts">

export default {
  directives: {},
  data() {
    return {
      items: [
        {
          src: 'https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/information/carouselone.JPEG',
        },
        {
          src: 'https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/information/carouseltwo.jpg',
        },
        {
          src: 'https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/information/carouselthree.png',
        },
      ],
    }
  },
}
</script>
